var CurrentPieceLetter = "";
var AlphaToNumericArray = {A:1,B:2,C:3,D:4,E:5,F:6,G:7,H:8,I:9,J:10,K:11,L:12,M:13,N:14,O:15,P:16,Q:17,R:18,S:19,T:20,U:21,V:22,W:23,X:24,Y:25,Z:26};
var NumericToAlphaArray = {1:"A",2:"B",3:"C",4:"D",5:"E",6:"F",7:"G",8:"H",9:"I",10:"J",11:"K",12:"L",13:"M",14:"N",15:"O",16:"P",17:"Q",18:"R",19:"S",20:"T",21:"U",22:"V",23:"W",24:"X",25:"Y",26:"Z"};
var GridOn = true;

$(document).ready(function () {
    initializeControls();
});

/* Sets up all of the initial UI controls */
function initializeControls() {
		$('body').layout({
		    north__resizable: false,south__resizable: false,north__size: 40,west__size:252,east__size:0,east__hide: true,
			west__onresize:		$.layout.callbacks.resizePaneAccordions,
			east__onresize:		$.layout.callbacks.resizePaneAccordions,
			center__onresize:		$.layout.callbacks.resizePaneAccordions
		});

		// ACCORDION - in the West pane
		$("#AccordionTrackComponents").accordion({ fillSpace:	true });
		$("#AccordionTrackLayout").accordion({ fillSpace:	true });
		
		// ACCORDION - in the East pane - in a 'content-div'
		$("#accordion2").accordion({
			fillSpace:	true
		,	active:		1
		});
		
		$(".AddPieceButton").button({icons:{primary: "ui-icon-circle-plus" }, text: false });
		$(".RotatePieceButton").button({icons:{primary: "ui-icon-arrowrefresh-1-s" }, text:false});
		$(".CancelAddPieceButton").button({icons:{primary: "ui-icon-circle-close" }, text:false});
        
        $("#ResetLayoutButton").button({icons: {
                primary: "ui-icon-arrowreturnthick-1-w"
            },
            text: true
        });
        $("#ShowHideGridDividers").button({icons: {
                primary: "ui-icon-arrow-4-diag"
            },
            text: true
        });
        $("#ResetLayoutButton").click(function() { ResetTrackLayout(); });
        
        $( "#SetTrackDimensionsDialogForm" ).dialog({
		        autoOpen: false,
		        height: 220,
		        width: 350,
		        modal: true,
		        buttons: {
			        "Create layout": function() {
			            buildTrackLayoutGrid();
					    $(this ).dialog( "close" );
			        }
		        },
		        close: function() {
		        }
	        });  
	    $("#SetTrackDimensionsDialogForm").dialog("open");      
	    $("#MainLayoutTabs").tabs();
}


function ResetTrackLayout() {
    var confirmationValid = ShowConfirmationDialog('Are you sure you want to reset the layout and lose all changes?');
}

function ShowConfirmationDialog(message) {
    $('#ConfirmDialogContent').html('');
    $('#ConfirmDialogContent').html(message);
    $( "#ConfrimActionDialog" ).dialog({
	    resizable: false,
	    height:140,
	    modal: true,
	    buttons: {
		    "Ok": function() {
			   $("#TrackLayoutTableDiv").html('');
			   $("#SetTrackDimensionsDialogForm" ).dialog("open");
			    $( this ).dialog("close");
		    },
		    Cancel: function() {
			    $( this ).dialog("close");
			    return false;
		    }
	    }
    });
}

function buildTrackLayoutGrid() {
    var lengthInFeet = parseInt($("#TrackLengthInput").val(),10);
    var depthInFeet = parseInt($("#TrackWidthInput").val(),10);
    var numberOfXSquares = Math.floor(((lengthInFeet * 12) / 19));
    var numberOfYSquares = Math.floor(((depthInFeet * 12) / 19));
    var tableWidthPx = (numberOfXSquares * 92);
    var tableHeightPx = (numberOfYSquares * 92);
    var TrackLayoutTable = $('<table/>',{
    		"cellpadding":0,
		"cellspacing":0,
		"style": "width:" + tableWidthPx + "px;height:" + tableHeightPx + "px;" 
    }); 
    var rows;
	for (rows=1;rows<=numberOfYSquares;rows++)
	{
		var newTrackGridPieceRow = $('<tr/>');
		var cols;
		for (cols=1;cols<=numberOfXSquares;cols++) {
			var newTrackGridPieceColId = NumericToAlphaArray[cols].toString() + rows;
			var newTrackGridPieceCol = $('<td/>', {
				"id":newTrackGridPieceColId,
				"class":"GridPiece GridPieceEmpty",
				click: function() { 
					LayoutGridItemClicked(this); 
				}
			});
			newTrackGridPieceRow.append(newTrackGridPieceCol);
		}
		TrackLayoutTable.append(newTrackGridPieceRow);
	}
	$("#TrackLayoutTableDiv").append(TrackLayoutTable);
}




function rotatePieceA() {
	if ($("#AvailablePieceA").hasClass("AvailablePieceA0")) {
		$("#AvailablePieceA").removeClass("AvailablePieceA0");
		$("#AvailablePieceA").addClass("AvailablePieceA90");
	} else {
		if ($("#AvailablePieceA").hasClass("AvailablePieceA90")) {
			$("#AvailablePieceA").removeClass("AvailablePieceA90");
			$("#AvailablePieceA").addClass("AvailablePieceA180");
		} else {
			if ($("#AvailablePieceA").hasClass("AvailablePieceA180")) {
				$("#AvailablePieceA").removeClass("AvailablePieceA180");
				$("#AvailablePieceA").addClass("AvailablePieceA270");
			} else {
				if ($("#AvailablePieceA").hasClass("AvailablePieceA270")) {
					$("#AvailablePieceA").removeClass("AvailablePieceA270");
					$("#AvailablePieceA").addClass("AvailablePieceA0");
				}
			}
		}
	}
	addPieceA();
}

function rotatePieceB() {
	if ($("#AvailablePieceB").hasClass("AvailablePieceB0")) {
		$("#AvailablePieceB").removeClass("AvailablePieceB0");
		$("#AvailablePieceB").addClass("AvailablePieceB90");
	} else {
		if ($("#AvailablePieceB").hasClass("AvailablePieceB90")) {
			$("#AvailablePieceB").removeClass("AvailablePieceB90");
			$("#AvailablePieceB").addClass("AvailablePieceB180");
		} else {
			if ($("#AvailablePieceB").hasClass("AvailablePieceB180")) {
				$("#AvailablePieceB").removeClass("AvailablePieceB180");
				$("#AvailablePieceB").addClass("AvailablePieceB270");
			} else {
				if ($("#AvailablePieceB").hasClass("AvailablePieceB270")) {
					$("#AvailablePieceB").removeClass("AvailablePieceB270");
					$("#AvailablePieceB").addClass("AvailablePieceB0");
				}
			}
		}
	}
	addPieceB();
}

function rotatePieceC() {
	if ($("#AvailablePieceC").hasClass("AvailablePieceC0")) {
		$("#AvailablePieceC").removeClass("AvailablePieceC0");
		$("#AvailablePieceC").addClass("AvailablePieceC90");
	} else {
		if ($("#AvailablePieceC").hasClass("AvailablePieceC90")) {
			$("#AvailablePieceC").removeClass("AvailablePieceC90");
			$("#AvailablePieceC").addClass("AvailablePieceC180");
		} else {
			if ($("#AvailablePieceC").hasClass("AvailablePieceC180")) {
				$("#AvailablePieceC").removeClass("AvailablePieceC180");
				$("#AvailablePieceC").addClass("AvailablePieceC270");
			} else {
				if ($("#AvailablePieceC").hasClass("AvailablePieceC270")) {
					$("#AvailablePieceC").removeClass("AvailablePieceC270");
					$("#AvailablePieceC").addClass("AvailablePieceC0");
				}
			}
		}
	}
	addPieceC();
}




function rotatePieceD() {
	if ($("#AvailablePieceD").hasClass("AvailablePieceD0")) {
		$("#AvailablePieceD").removeClass("AvailablePieceD0");
		$("#AvailablePieceD").addClass("AvailablePieceD90");
	} else {
		if ($("#AvailablePieceD").hasClass("AvailablePieceD90")) {
			$("#AvailablePieceD").removeClass("AvailablePieceD90");
			$("#AvailablePieceD").addClass("AvailablePieceD180");
		} else {
			if ($("#AvailablePieceD").hasClass("AvailablePieceD180")) {
				$("#AvailablePieceD").removeClass("AvailablePieceD180");
				$("#AvailablePieceD").addClass("AvailablePieceD270");
			} else {
				if ($("#AvailablePieceD").hasClass("AvailablePieceD270")) {
					$("#AvailablePieceD").removeClass("AvailablePieceD270");
					$("#AvailablePieceD").addClass("AvailablePieceD0");
				}
			}
		}
	}
	addPieceD();
}

function rotatePieceE() {
	if ($("#AvailablePieceE").hasClass("AvailablePieceE0")) {
		$("#AvailablePieceE").removeClass("AvailablePieceE0");
		$("#AvailablePieceE").addClass("AvailablePieceE90");
	} else {
		if ($("#AvailablePieceE").hasClass("AvailablePieceE90")) {
			$("#AvailablePieceE").removeClass("AvailablePieceE90");
			$("#AvailablePieceE").addClass("AvailablePieceE180");
		} else {
			if ($("#AvailablePieceE").hasClass("AvailablePieceE180")) {
				$("#AvailablePieceE").removeClass("AvailablePieceE180");
				$("#AvailablePieceE").addClass("AvailablePieceE270");
			} else {
				if ($("#AvailablePieceE").hasClass("AvailablePieceE270")) {
					$("#AvailablePieceE").removeClass("AvailablePieceE270");
					$("#AvailablePieceE").addClass("AvailablePieceE0");
				}
			}
		}
	}
	addPieceE();
}

function rotatePieceF() {
	if ($("#AvailablePieceF").hasClass("AvailablePieceF0")) {
		$("#AvailablePieceF").removeClass("AvailablePieceF0");
		$("#AvailablePieceF").addClass("AvailablePieceF90");
	} else {
		if ($("#AvailablePieceF").hasClass("AvailablePieceF90")) {
			$("#AvailablePieceF").removeClass("AvailablePieceF90");
			$("#AvailablePieceF").addClass("AvailablePieceF180");
		} else {
			if ($("#AvailablePieceF").hasClass("AvailablePieceF180")) {
				$("#AvailablePieceF").removeClass("AvailablePieceF180");
				$("#AvailablePieceF").addClass("AvailablePieceF270");
			} else {
				if ($("#AvailablePieceF").hasClass("AvailablePieceF270")) {
					$("#AvailablePieceF").removeClass("AvailablePieceF270");
					$("#AvailablePieceF").addClass("AvailablePieceF0");
				}
			}
		}
	}
	addPieceF();
}

function rotatePieceG() {
	if ($("#AvailablePieceG").hasClass("AvailablePieceG0")) {
		$("#AvailablePieceG").removeClass("AvailablePieceG0");
		$("#AvailablePieceG").addClass("AvailablePieceG90");
	} else {
		if ($("#AvailablePieceG").hasClass("AvailablePieceG90")) {
			$("#AvailablePieceG").removeClass("AvailablePieceG90");
			$("#AvailablePieceG").addClass("AvailablePieceG180");
		} else {
			if ($("#AvailablePieceG").hasClass("AvailablePieceG180")) {
				$("#AvailablePieceG").removeClass("AvailablePieceG180");
				$("#AvailablePieceG").addClass("AvailablePieceG270");
			} else {
				if ($("#AvailablePieceG").hasClass("AvailablePieceG270")) {
					$("#AvailablePieceG").removeClass("AvailablePieceG270");
					$("#AvailablePieceG").addClass("AvailablePieceG0");
				}
			}
		}
	}
	addPieceG();
}

function rotatePieceH() {
	if ($("#AvailablePieceH").hasClass("AvailablePieceH0")) {
		$("#AvailablePieceH").removeClass("AvailablePieceH0");
		$("#AvailablePieceH").addClass("AvailablePieceH90");
	} else {
		if ($("#AvailablePieceH").hasClass("AvailablePieceH90")) {
			$("#AvailablePieceH").removeClass("AvailablePieceH90");
			$("#AvailablePieceH").addClass("AvailablePieceH180");
		} else {
			if ($("#AvailablePieceH").hasClass("AvailablePieceH180")) {
				$("#AvailablePieceH").removeClass("AvailablePieceH180");
				$("#AvailablePieceH").addClass("AvailablePieceH270");
			} else {
				if ($("#AvailablePieceH").hasClass("AvailablePieceH270")) {
					$("#AvailablePieceH").removeClass("AvailablePieceH270");
					$("#AvailablePieceH").addClass("AvailablePieceH0");
				}
			}
		}
	}
	addPieceH();
}

function rotatePieceI() {
	if ($("#AvailablePieceI").hasClass("AvailablePieceI0")) {
		$("#AvailablePieceI").removeClass("AvailablePieceI0");
		$("#AvailablePieceI").addClass("AvailablePieceI90");
	} else {
		if ($("#AvailablePieceI").hasClass("AvailablePieceI90")) {
			$("#AvailablePieceI").removeClass("AvailablePieceI90");
			$("#AvailablePieceI").addClass("AvailablePieceI180");
		} else {
			if ($("#AvailablePieceI").hasClass("AvailablePieceI180")) {
				$("#AvailablePieceI").removeClass("AvailablePieceI180");
				$("#AvailablePieceI").addClass("AvailablePieceI270");
			} else {
				if ($("#AvailablePieceI").hasClass("AvailablePieceI270")) {
					$("#AvailablePieceI").removeClass("AvailablePieceI270");
					$("#AvailablePieceI").addClass("AvailablePieceI0");
				}
			}
		}
	}
	addPieceI();
}


function addPieceA() {
	CurrentPieceLetter = "A";
	$(".CancelAddPieceButton").hide();
	$(".AddPieceButton").show();
	$("#AddPieceATopLeft").hide();
	$("#CancelAddPieceA").show();
	$('.GridPieceEmpty').addClass("GridPieceReadyForPlacement");
}

function addPieceB() {
	CurrentPieceLetter = "B";
	$(".CancelAddPieceButton").hide();
	$(".AddPieceButton").show();
	$("#AddPieceBTopLeft").hide();
	$("#CancelAddPieceB").show();
	$('.GridPieceEmpty').addClass("GridPieceReadyForPlacement");
}

function addPieceC() {
	CurrentPieceLetter = "C";
	$(".CancelAddPieceButton").hide();
	$(".AddPieceButton").show();
	$("#AddPieceCTopLeft").hide();
	$("#CancelAddPieceC").show();
	$('.GridPieceEmpty').addClass("GridPieceReadyForPlacement");
}

function addPieceD() {
	CurrentPieceLetter = "D";
	$(".CancelAddPieceButton").hide();
	$(".AddPieceButton").show();
	$("#AddPieceDTopLeft").hide();
	$("#CancelAddPieceD").show();
	$('.GridPieceEmpty').addClass("GridPieceReadyForPlacement");
}

function addPieceE() {
	CurrentPieceLetter = "E";
	$(".CancelAddPieceButton").hide();
	$(".AddPieceButton").show();
	$("#AddPieceETopLeft").hide();
	$("#CancelAddPieceE").show();
	$('.GridPieceEmpty').addClass("GridPieceReadyForPlacement");
}

function addPieceF() {
	CurrentPieceLetter = "F";
	$(".CancelAddPieceButton").hide();
	$(".AddPieceButton").show();
	$("#AddPieceCTopLeft").hide();
	$("#CancelAddPieceC").show();
	$('.GridPieceEmpty').addClass("GridPieceReadyForPlacement");
}

function addPieceG() {
	CurrentPieceLetter = "G";
	$(".CancelAddPieceButton").hide();
	$(".AddPieceButton").show();
	$("#AddPieceGTopLeft").hide();
	$("#CancelAddPieceG").show();
	$('.GridPieceEmpty').addClass("GridPieceReadyForPlacement");
}

function addPieceH() {
	CurrentPieceLetter = "H";
	$(".CancelAddPieceButton").hide();
	$(".AddPieceButton").show();
	$("#AddPieceHTopLeft").hide();
	$("#CancelAddPieceH").show();
	$('.GridPieceEmpty').addClass("GridPieceReadyForPlacement");
}

function addPieceI() {
	CurrentPieceLetter = "I";
	$(".CancelAddPieceButton").hide();
	$(".AddPieceButton").show();
	$("#AddPieceITopLeft").hide();
	$("#CancelAddPieceI").show();
	$('.GridPieceEmpty').addClass("GridPieceReadyForPlacement");
}


function cancelAddPiece() {
	CurrentPieceLetter = "";
	$(".CancelAddPieceButton").hide();
	$(".AddPieceButton").show();
	$('.GridPieceEmpty').removeClass("GridPieceReadyForPlacement");
}


function LayoutGridItemClicked(objectRaised) {
	if (($(objectRaised).hasClass("GridPieceEmpty")) && (CurrentPieceLetter !== "")) {
		if (CurrentPieceLetter == "D") {
			$(objectRaised).removeClass("GridPieceEmpty");
			$(objectRaised).removeClass("GridPieceReadyForPlacement");
			$(objectRaised).addClass("AvailablePieceThumbnail");
			if ($("#AvailablePiece" + CurrentPieceLetter).hasClass("AvailablePiece" + CurrentPieceLetter + "0")) {
				$(objectRaised).addClass("AvailablePiece" + CurrentPieceLetter + "0");
				$(objectRaised).attr("colspan",2);
				$("#" + NumericToAlphaArray[AlphaToNumericArray[objectRaised.id.substring(0,1)] + 1] + objectRaised.id.slice(1)).hide();
			} else {
				if ($("#AvailablePiece" + CurrentPieceLetter).hasClass("AvailablePiece" + CurrentPieceLetter + "90")) {
					$(objectRaised).addClass("AvailablePiece" + CurrentPieceLetter + "90");
					$(objectRaised).attr("rowspan",2);
					var nextRow = (parseInt(objectRaised.id.slice(1),10) + 1);
					$("#" + objectRaised.id.substring(0,1) + nextRow.toString()).hide();
				} else {
					if ($("#AvailablePiece" + CurrentPieceLetter).hasClass("AvailablePiece" + CurrentPieceLetter + "180")) {
						$(objectRaised).addClass("AvailablePiece" + CurrentPieceLetter + "180");
						$(objectRaised).attr("colspan",2);
						$("#" + NumericToAlphaArray[AlphaToNumericArray[objectRaised.id.substring(0,1)] + 1] + objectRaised.id.slice(1)).hide();
					} else {
						if ($("#AvailablePiece" + CurrentPieceLetter).hasClass("AvailablePiece" + CurrentPieceLetter + "270")) {
							$(objectRaised).addClass("AvailablePiece" + CurrentPieceLetter + "270");
							$(objectRaised).attr("rowspan",2);
							var nextRow = (parseInt(objectRaised.id.slice(1),10) + 1);
							$("#" + objectRaised.id.substring(0,1) + nextRow.toString()).hide();
						} 		
					}			
				}
			}
		} else {				
			$(objectRaised).removeClass("GridPieceEmpty");
			$(objectRaised).removeClass("GridPieceReadyForPlacement");
			$(objectRaised).addClass("AvailablePieceThumbnail");
			if ($("#AvailablePiece" + CurrentPieceLetter).hasClass("AvailablePiece" + CurrentPieceLetter + "0")) {
				$(objectRaised).addClass("AvailablePiece" + CurrentPieceLetter + "0");
			} else {
				if ($("#AvailablePiece" + CurrentPieceLetter).hasClass("AvailablePiece" + CurrentPieceLetter + "90")) {
					$(objectRaised).addClass("AvailablePiece" + CurrentPieceLetter + "90");
				} else {
					if ($("#AvailablePiece" + CurrentPieceLetter).hasClass("AvailablePiece" + CurrentPieceLetter + "180")) {
						$(objectRaised).addClass("AvailablePiece" + CurrentPieceLetter + "180");
					} else {
						if ($("#AvailablePiece" + CurrentPieceLetter).hasClass("AvailablePiece" + CurrentPieceLetter + "270")) {
							$(objectRaised).addClass("AvailablePiece" + CurrentPieceLetter + "270");
						} 		
					}			
				}
			}
		}
	} else { 
		if ($(objectRaised).attr("colspan")) {
		    $(objectRaised).removeAttr("colspan");
		    $("#" + NumericToAlphaArray[AlphaToNumericArray[objectRaised.id.substring(0,1)] + 1] + objectRaised.id.slice(1)).show();
		}
		if ($(objectRaised).attr("rowspan")) {
		    $(objectRaised).removeAttr("rowspan");
		    var nextRow = (parseInt(objectRaised.id.slice(1),10) + 1);
		    $("#" + objectRaised.id.substring(0,1) + nextRow.toString()).show();
		}
		$(objectRaised).removeClass();
		$(objectRaised).addClass("GridPiece");
		$(objectRaised).addClass("GridPieceEmpty");	
		if (CurrentPieceLetter !== "") { $(objectRaised).addClass("GridPieceReadyForPlacement"); }
	}
}

function toggleGrid() {
	if (GridOn) {
		$(".GridPiece").addClass("GridPieceNoBorder");	
		GridOn = false;
	} else {
		$(".GridPiece").removeClass("GridPieceNoBorder");	
		GridOn = true;
	}
}

